<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>

</head>

<body>
    <div id="app">
      输入的信息：<input type="text" v-model="info">
      <br>
      {{reverse}}
      <!-- 反转的信息：{{reverseinfo()}}
      <br>
      {{hehe}}
      {{hehe}}
      {{hehe}}
      {{hehe}}
     {{hello()}}
     {{hello()}}
     {{hello()}}
     {{hello()}}
     {{hello()}} -->



      <!-- 
      在插值语法中可以直接调用方法，小括号不能省略，这个是需要Vue实例所管理的。
      
      -->
      <br>
      <!-- 反转的信息：{{info.split("").reverse().join("")}}
      反转的信息：{{info.split("").reverse().join("")}}
      反转的信息：{{info.split("").reverse().join("")}}
      反转的信息：{{info.split("").reverse().join("")}} 
      
      计算属性：
      1.什么是计算属性
        使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性

        Vue的原有属性：data对象当中的属性可以叫做Vue的原有属性
        全新的属性：表示生成了一个新的属性，和data的属性无关了，新的属性也有自己的属性名和属性值了

      2.计算属性怎么用
        需要一个新的配置项，computed
        computed: {
          //这是一个计算属性
          计算属性1：{
            //getter和setter方法
            //当读取计算属性1的时候，getter方法会被自动调用
            get(){
            
            },
            //当修改计算属性1的时候，setter方法会被自动调用
            //val表示修改的值
            set(val){
            
            }
         }，
         //这是另外一个计算属性
          计算属性2：{}，
          ...
            
        }
        

      3.计算属性的作用
        代码得到了复用，更加便于维护，执行效率更高了

      
      
      -->

    </div>
    
</body>

    <script>
     

        var app = new Vue({
            el: '#app',
            data: {
                info:"",
                msg:"hahahah"
               
                    
            },
        
            methods: {
                reverseinfo(){
                    return this.info.split("").reverse().join("")
                },
                hello(){
                    console.log("hello");
                    return "hello"
                }
                    

            },
            computed: {

                hehe:{
                    //不能使用箭头函数，使用箭头函数会导致this指向的是：window

                    // get方法的调用时机包括两个：
                    // 第一个时机：第一次访问这个属性时
                    // 第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，getter方法会被重新调用一次
                    

                    get(){
                        console.log("get");
                        return "haha"
                        
                    },
                    set(val){
                        console.log("set");
                    }
                },
                // reverse(){
                //     return this.info.split("").reverse().join("")
                // },
               reverse:{
                get(){
                    return this.info.split("").reverse().join("")
                },
                set(val){
                  
                }
               }
          
            
                
            }

        
        
        })
    </script> 
</html>